<template>
  <div class="app">
    <div class="content">
      <div><input v-model.lazy.trim="text" type="text"><button @click="order=1">升序</button><button @click="order=2">降序</button><button @click="order=0,text=''">复原</button></div>
      <p :key="item.id" v-for="item in filterList">{{ item.name+'--'+item.age}}</p>

    </div>
    <button @click="addNum(10)">{{num}}</button>
    <button @click="addNumtwo()">{{num}}</button>
    <div>{{manNums}} 男</div>
    <div>人数 {{totalNum}}</div>
    <button @click="gaddNum(20)">goods+20</button>
    <button @click="gaddNum2">goods+10</button>

  </div>
</template>

<script>

import { mapState,mapActions,mapGetters,mapMutations } from 'vuex';

export default {
  name: "App",
  data() {
    return {
      text:'',
      order:0,//0原来 1升序 2降序
      list: [
        {id:1,name:'张三',age:22},
        {id:2,name:'李四',age:25},
        {id:3,name:'王五',age:18},
        {id:4,name:'路六',age:43},],

    };
  },
  methods: {
    //根组件
    ...mapActions(['addNumtwo']),
    ...mapMutations(['addNum']),

    //goods组件

...mapActions('goods',['gaddNum2']),
...mapMutations('goods',['gaddNum'])

  },

  computed: {
    //根组件
        ...mapState(['num']),
        ...mapGetters(['manNums']),
    //goods组件
...mapState('goods',['gnum']),
...mapGetters('goods',['totalNum']),


    filterList(){
      const arr=this.list.filter(v=>{
        return v.name.indexOf(this.text)!==-1
      })
      if(this.order){
        arr.sort((p1,p2)=>{
          return this.order===1?p1.age-p2.age:p2.age-p1.age
        })
      }
      return arr
    }
  },

  components: {},

  created(){
    console.log(this.$store);
  }
};
</script>

<style scoped lang=less>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.app {
  width: 300px;
  height: 550px;
  background-color: #707477;
}
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
ul {
  display: inline-flex;
  list-style: none;
  font-size: 12px;
  background-color: #707477;
  width: 100%;
  justify-content: space-evenly;
  bottom: 1px;
  background-color: #778899;
  a {
    text-decoration: none;
    color: aliceblue;
  }
}
.router-link-active {
  color: #ffad34;
}
</style>